import React, { useState,useEffect} from 'react';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import Auth from '../../router/PrivateRoute';
import './Login.css';

const Login = () => {
    useEffect(()=>{
        // console.log(111);
    })
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
    const location = useLocation();

    const onFinish = async (values) => {
        setLoading(true);
        try {
            // 模拟登录API调用
            const response = await fakeLogin(values.username, values.password);
            console.log(response);

            if (response.success) {
                Auth.setToken(response.token);
                message.success('登录成功！');

                // 获取重定向路径
                const from = location.state?.from?.pathname || '/home';
                navigate(from, { replace: true });
            } else {
                console.log('error');
                // alert(response.message || '登录失败');
                message.error(response.message || '登录失败');
            }
        } catch (error) {
            message.error('登录失败，请重试');
        } finally {
            setLoading(false);
        }
    };

    // 模拟登录函数
    const fakeLogin = (username, password) => {
        return new Promise((resolve) => {
            if (username === 'admin' && password === '123456') {
                resolve({
                    success: true,
                    token: 'fake-jwt-token',
                    message: '登录成功'
                });
            } else {
                resolve({
                    success: false,
                    message: '用户名或密码错误'
                });
            }
        });
    };

    return (
        <div className="login-container">
            <div className="login-box">
                <div className="login-header">
                    <h2>用户登录</h2>
                    <p>欢迎回来，请输入您的账号</p>
                </div>

                <Form
                    name="login"
                    layout="vertical"
                    onFinish={onFinish}
                    autoComplete="off"
                    size="middle"
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input
                            placeholder="用户名"
                            className="login-input"
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input.Password
                            placeholder="密码"
                            className="login-input"
                        />
                    </Form.Item>

                    <Form.Item>
                        <div className="login-options">
                            <Checkbox>记住我</Checkbox>
                            <a href="#" className="forgot-link">忘记密码?</a>
                        </div>
                    </Form.Item>

                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            block
                            className="login-button"
                            loading={loading}
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>

                <div className="login-footer">
                    <span>还没有账号？</span>
                    <a href="#">立即注册</a>
                </div>
            </div>
        </div>
    );
};

export default Login;